<template>
    <div class="mainDiv" style="padding: 10px;box-sizing: border-box;">
        <el-alert class="mt" title="温馨提示：起初审核后将不能编辑起初信息，请确认起初信息填写正确！" type="error"></el-alert>
        <div class="rowHead">
            <el-tag>客户姓名：{{ginfo.name}}</el-tag>
            <el-tag class="ml">客户电话：{{ginfo.phone}}</el-tag>
            <el-input size="small" v-model="ginfo.balance" style="width: 200px">
                <template slot="prepend">账户余额</template>
            </el-input>
            <el-input size="small" v-model="ginfo.giftbalance" style="width: 200px">
                <template slot="prepend">赠送余额</template>
            </el-input>
            <el-select size="small" v-model="ginfo.level" style="width: 200px">
                <el-option v-for="(v,index) in vlist" :label="v.vipname" :value="v.id" :key="index">
                </el-option>
            </el-select>
        </div>
        <div class="rowHead">
            <el-button type="primary" size="small" icon="el-icon-plus" class="mt mb" @click="addSubs">起初项目</el-button>
            <el-table :data="slist" :stripe="true">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="name" label="项目"></el-table-column>
                <el-table-column prop="number" label="编号"></el-table-column>
                <el-table-column prop="cardtype" label="所属类型" width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.cardtype" active-color="#60e489" inactive-color="#606ae4" active-text="期卡" inactive-text="疗程">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="原价"></el-table-column>
                <el-table-column prop="disprice" label="折扣价">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.disprice" v-if="!scope.row.cardtype"></el-input>
                        <span v-else>0</span>
                    </template>
                </el-table-column>
                </el-table-column>
                <el-table-column prop="nownum" label="剩余数">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.nownum" v-if="!scope.row.cardtype"></el-input>
                        <span v-else>0</span>
                    </template>
                </el-table-column>
                <el-table-column prop="endtime" label="有效期" width="150">
                    <template slot-scope="scope">
                        <el-date-picker size="mini" style="width: 140px;" v-model="scope.row.endtime" type="date" placeholder="选择截止日期" v-if="scope.row.cardtype">
                        </el-date-picker>
                        <span v-else>用完为止</span>
                    </template>
                </el-table-column>
                <el-table-column label="移除">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" icon="el-icon-close" @click="delRowSubs(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" size="small" icon="el-icon-plus" class="mt mb" @click="addGods">起初产品</el-button>
            <el-table :data="glist" :stripe="true">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="gname" label="产品"></el-table-column>
                <el-table-column prop="number" label="编号"></el-table-column>
                <el-table-column prop="price" label="单价"></el-table-column>
                <el-table-column prop="disprice" label="折扣价">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isgift">0</span>
                        <el-input size="mini" v-model="scope.row.disprice" v-else></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="nownum" label="剩余数">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.nownum"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="isgift" label="是否赠送">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.isgift" active-color="#409eff" inactive-color="#999" active-text="赠" inactive-text="否">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="移除">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" icon="el-icon-close" @click="delRowGods(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block right mt mb">
            <el-button size="mini" type="success" icon="el-icon-upload" @click="setQichu">确定修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-close" @click="close">取消关闭</el-button>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'

export default {
  name: 'editGuestInitial',
  data () {
    return {
      ginfo: {}, // 客户的基本信息
      slist: [], // 客户需要添加的卡项列表
      glist: [], // 客户之前暂存的品项列表
      delsid: [], // 需要删除的客户卡项ID
      delgid: [], // 需要删除的客户暂存品项ID
      vlist: [],
      gid: 0
    }
  },
  methods: {

    addSubs: async function () {
      let res = await C.openBrowserWindow('/selectSubject', {}, { width: 1200, height: 860, useSpa: false, spaModel: 'shop', transparent: true, frame: false })
      if (res) {
        res.forEach((v) => {
          this.slist.push({
            subjectid: v.id,
            name: v.name,
            price: v.price,
            disprice: v.price,
            number: v.number,
            cardtype: false,
            isgift: false,
            nownum: '',
            endtime: ''
          })
        })
      }
    },
    close () {
      C.closewin()
    },
    delRowSubs: function (i) {
      if (this.slist[i].id) this.delsid.push(this.slist[i].id)
      this.slist.splice(i, 1)
    },

    addGods: async function () {
      let res = await C.openBrowserWindow('/selectGoods', {}, { width: 1200, height: 860, useSpa: false, spaModel: 'shop', transparent: true, frame: false })
      if (res) {
        res.forEach((v) => {
          this.glist.push({
            goodsid: v.id,
            gname: v.name,
            number: v.number,
            price: v.price,
            disprice: v.price,
            nownum: '',
            isgift: false,
            brandid: v.brandid
          })
        })
      }
    },

    delRowGods: function (i) {
      if (this.glist[i].id) this.delgid.push(this.glist[i].id)
      this.glist.splice(i, 1)
    },

    setQichu: async function () {
      let currentTime = Math.round(new Date().valueOf() / 1000)

      let err1 = {
        type: false,
        msg: '请选择项目有效期，并且大于今天'
      }
      let err2 = {
        type: false,
        msg: '请添加项目的总数和剩余数量，且剩余数量低于总数'
      }
      let err3 = {
        type: false,
        msg: '请添加产品的总数和剩余量，且剩余数量低于总数'
      }

      this.slist.forEach((v) => {
        if (v.cardtype) {
          if (v.endtime === '' || Math.round(new Date(v.endtime).valueOf() / 1000) < currentTime) {
            err1.type = true
          }
        } else {
          if (v.nownum * 1 <= 0) {
            err2.type = true
          }
        }
      })

      this.glist.forEach((v) => {
        if (v.nownum * 1 <= 0) {
          err3.type = true
        }
      })

      if (err1.type) {
        C.error(err1.msg)
        return false
      } else if (err2.type) {
        C.error(err2.msg)
        return false
      } else if (err3.type) {
        C.error(err3.msg)
        return false
      }

      let data = {
        ginfo: {
          id: this.ginfo.id,
          balance: this.ginfo.balance,
          giftbalance: this.ginfo.giftbalance,
          level: this.ginfo.level
        },
        slist: this.slist,
        delsid: this.delsid,
        glist: this.glist,
        delgid: this.delgid
      }

      let res = await C.ajax('/shop/guest/setguestinitial', { data: JSON.stringify(data) }, 'post')
      if (res) {
        C.closeBrowserWindow(res)
      }
    }

  },
  mounted: async function () {
    let Request = C.getDatas()
    this.gid = Request.gid
    let res = await C.ajax('/shop/guest/queryinitail', { gid: Request.gid })
    if (res) {
      this.ginfo = res.ginfo
      this.vlist = res.vlist
      res.slist.forEach((v) => {
        if (v.cardtype === 1) {
          v.cardtype = true
          v.endtime = new Date(v.endtime * 1000)
        } else {
          v.cardtype = false
          v.endtime = new Date()
        }
      })
      this.slist = res.slist

      res.glist.forEach((v) => {
        v.isgift = !!v.isgift
      })
      this.glist = res.glist
    }
  }
}
</script>